{layout '../Public/sideForm.latte'}
{block title}发布周期性任务{/block}


{block private_css}
    <style>
        .priority-input{
            display:inline-block;
            width:35px;
            height:35px;
            line-height:35px;
            text-align:center;
            margin-right:15px;
            color:#fff !important;
            border:2px solid #fff;
        }

        .priority-input span{
            margin:auto !important;
            display:block;
            width:30px;
            height:30px;
            line-height:30px;
            border-radius:50%;
            cursor:pointer;
        }

        .priority-input input{
            display:none !important;
        }

        .priority-A span{
            background:#FB855C;
        }

        .priority-B span{
            background:#FFBA00;
        }

        .priority-C span{
            background:#305AAE;
        }

        .priority-D span{
            background:#5CABFB;
        }

        .priority-input.selected{
            font-weight:900 !important;
            border:2px solid #009DD9;
            background:#d7d7d7;
        }

        .medal-item{
            border:1px solid #ddd;
            display:inline-block;
            vertical-align:middle;
            min-width:80px;
            padding:3px 8px;
            margin-right:5px;
            height:35px;
            line-height:35px;
            text-align:center;
            cursor:pointer;
        }

        .medal-item img{
            width:30px;
            height:30px;
            vertical-align:middle;
        }

        .medal-item.medal-item-selected{
            border:2px solid #009DD9;
        }

        .acorn-item{
            width:90px;
            display:inline-block;
            margin-right:10px;
        }

        .acorn-item dt{
            text-align:center;
            font-size:14px;
            height:30px;
            line-height:30px;
        }

        .acorn-item dd input{
            width:100% !important;
            text-align:center;
            padding-left:0 !important;
        }

        .mform .control-group div.input-group select[disabled]{
            background-color:rgb(235, 235, 228);
        }

        .help-question{
            display:inline-block; width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;text-decoration:none;cursor:pointer;margin-left:5px;background:#ddd;color:#fff;
        }

        .help-question:hover{
            background:#bebebe;text-decoration:none;color:#fff;
        }

        #frm_cycleTime_boxs{
            width:450px;
            height:275px;
            padding-top:15px;
            position:absolute;
            background:#fff;
            box-shadow:0 4px 23px 5px rgba(0, 0, 0, .2);
            z-index:99999;
            left:-152px;top:2px;
        }

        .cycleTime_box_start, .cycleTime_box_end{
            flex:1;
            height:220px;
            display:inline-block;
            overflow-y:auto;
            padding:0 5px;
        }

        .cycleTime_item{
            border:1px solid #ddd;
            margin-top:2px;margin-right:1px;margin-left:2px;
            padding:2px 5px;
            min-width:28px;
            text-align:center;
            cursor:pointer;
        }

        .cycleTime_item.cycleTime_item_selected{
            background:#4d91e4;
            border-color:#4d91e4;
            color:#fff;
        }

        #cycleTime_submit{
            background:#4d91e4;
            padding:0 20px;
            height:30px;
            line-height:30px;
            cursor:pointer;
            border-radius:5px;
            color:#fff;display:inline-block;
            vertical-align:bottom;
            width:50px;
            text-align:center;
            margin-top:0;
        }

        .radiobox-input{
            display:inline-block;
            width:80px;
            height:30px;
            line-height:30px;
            text-align:center;
            margin-right:5px;
            color:#fff !important;
        }

        .radiobox-input span{
            margin:auto !important;
            display:block;
            width:80px;
            height:30px;
            line-height:30px;
            border-radius:30px;
            cursor:pointer;
            background:#5CABFB;
            border:2px solid #fff;
        }

        .radiobox-input input{
            display:none !important;
        }

        .radiobox-input.selected span{
            font-weight:900 !important;
            border:2px solid #d7d7d7;
            background:#30436e;
        }
    </style>
{/block}

{block private_js}
    {include 'addJs.latte'}
    <script>
        init.ready(function () {
            $(".help-question").unbind().bind("click", function () {
                var that = this;
                layer.tips("计时模型：按任务时间来计算积分<br>计件模型：按完成任务数量计算积分", that);
            });
            $(".priority-input").unbind().bind("click", function () {
                $(this).siblings(".selected").removeClass("selected");
                $(this).addClass("selected");
            });
            $(".radiobox-input").unbind().bind("click", function () {
                $(this).siblings(".selected").removeClass("selected");
                $(this).addClass("selected");
                var $val = $(this).attr("data-value");
                if ($val == 1) {
                    $("#workload_type_1").show();
                    $("#workload_type_2").hide();
                    $("#workload_2").attr("disabled", "disabled");
                    $("#workload").removeAttr("disabled");
                    $("#expressie_1").show();
                    $("#expressie_2").hide();
                } else {
                    $("#workload_type_2").show();
                    $("#workload_type_1").hide();
                    $("#workload").attr("disabled", "disabled");
                    $("#workload_2").removeAttr("disabled");
                    $("#expressie_2").show();
                    $("#expressie_1").hide();
                }
            });
            $("[name='standardTypes'][value='1']").trigger("click");
            $(".medal-item").unbind().bind("click", function () {
                $(this).siblings(".medal-item-selected").removeClass("medal-item-selected");
                $(this).addClass("medal-item-selected");
                var val = $(this).attr("data-val");
                $("#medal").val(val);
            });
            $("#frm_cycleTime").unbind().bind("click", function () {
                $("#frm_cycleTime_box").css("visibility", "visible");
                var cycleTypes = $("#cycleTypes").val();
                $("#frm_cycleTime_box" + cycleTypes).show().siblings(".cycleTime_box").hide();
            });
            $("#cycleTypes").unbind().bind("change", function () {
                var cycleTypes = $(this).val();

                var boxId = "#frm_cycleTime_box" + cycleTypes;
                var $start = $(boxId + " .cycleTime_box_start .cycleTime_item_selected");
                var $end = $(boxId + " .cycleTime_box_end .cycleTime_item_selected");

                if ($start.length === 0) {
                    $(boxId + " .cycleTime_box_start .cycleTime_item:first").addClass("cycleTime_item_selected");
                    $start = $(boxId + " .cycleTime_box_start .cycleTime_item_selected");
                }
                if ($end.length === 0) {
                    $(boxId + " .cycleTime_box_end .cycleTime_item:first").addClass("cycleTime_item_selected");
                    $end = $(boxId + " .cycleTime_box_end .cycleTime_item_selected");
                }
                var startVal = $start.attr("data-val");
                var endVal = $end.attr("data-val");

                $("#cycleStart").val(startVal);
                $("#cycleEnd").val(endVal);

                if (cycleTypes == 2) {
                    var weeklist = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
                    startVal = weeklist[startVal - 1];
                    endVal = weeklist[endVal - 1];
                } else if (cycleTypes == 3) {
                    startVal += "号";
                    endVal += "号";
                }
                $("#frm_cycleTime").val(startVal + " 至 " + endVal);
                $("#frm_cycleTime_box" + cycleTypes).css("display", "flex").siblings(".cycleTime_box").css("display", "none");

            }).trigger("change");

            $(".cycleTime_item").unbind().bind("click", function () {
                $(this).addClass("cycleTime_item_selected").siblings(".cycleTime_item_selected").removeClass("cycleTime_item_selected");
                $("#cycleTypes").trigger("change");
            })
            $("#cycleTime_submit").unbind().bind("click", function () {
                $("#cycleTypes").trigger("change");
                $("#frm_cycleTime_box").css("visibility", "hidden");
            });

            $("#standardId").unbind().bind("change", function () {

                var selectedOption = $(this).find("option:selected");

                var val = selectedOption.attr("data-val");
                var workload = selectedOption.attr("data-workload");

                if (val != 0) {
                    $(".show-standard-acorn").text(val).show();
                    $(".expressie").hide();
                    if (!workload) {
                        $("#workload_day,#workload_hour,#workload_minute").removeAttr("disabled");
                    } else {
                        $("#workload_day,#workload_hour,#workload_minute").attr("disabled", true);
                        var workloads = workload.toString().split(",");
                        $("#workload_day").val(workloads[0]);
                        $("#workload_hour").val(workloads[1]);
                        $("#workload_minute").val(workloads[2]);
                        $("#workload").val(workload);
                    }
                } else {
                    $(".expressie").show();
                    $(".show-standard-acorn").hide();
                    $("#workload_day,#workload_hour,#workload_minute").removeAttr("disabled");
                }

            }).trigger("change");

            function setWorkload() {
                var day = $("#workload_day").val();
                var hour = $("#workload_hour").val();
                var minute = $("#workload_minute").val();
                var workload = [day, hour, minute].join(",");
                $("#workload").val(workload);
            }

            $("#workload_day,#workload_hour,#workload_minute").unbind().bind("change", function () {
                setWorkload();
            });
            if (typeof window.timerdeadline !== "undefined") {
                clearInterval(window.timerdeadline);
            }
        });
    </script>
{/block}
{block content}
    <form id="formArticle" class="stdform mform" method="post" action="">
        <table cellpadding="0" cellspacing="0" border="0" id="frmtable" class="formtable">
            <thead>
            <tr>
                <td><label>任务名称</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <input type="text" id="frm_names" name="names" class="smallinput"/>

                            <input type="hidden" name="pid" data-rel="pids">
                            <span class="set-group-name" id="pids">设置项目</span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>优先级</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            {foreach $priorityMemo as $priority =>$priorityM}
                                <label class="priority-input priority-{$priorityM} {if $priority==$priorityDefault}selected{/if}">
                                    <span><input type="radio" name="priority" value="{$priority}" {if $priority==$priorityDefault}checked{/if}>{$priorityM}</span>
                                </label>
                            {/foreach}
                            <span style="color: #FB855C;">说明：A表示重要紧急的，有时效性要求，为最高优先级</span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>执行人</label></td>
                <td>
                    <div class="field control-group">
                        {$executors|noescape}
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>验收人</label></td>
                <td>
                    <div class="field control-group">
                        {$accept|noescape}
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>频率</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <span style="display: inline-block;vertical-align: top;border:1px solid #D7D7D7 ;padding: 0 15px;height:33px;margin-top:0;line-height:33px">每</span>
                            <input name="cycleTimes" style="width:60px;text-align:center;margin-left:3px;padding-left:0;height:31px;vertical-align:top" value="1"/>
                            <select name="cycleTypes" id="cycleTypes" style="width: 60px !important;min-width:60px;margin-left:3px;text-align:center;vertical-align:top">
                                {foreach $cycleTypes as  $cycleType=>$cycleTypeMemo}
                                    <option value="{$cycleType}">{$cycleTypeMemo}</option>
                                {/foreach}
                            </select>
                            <input type="text" id="frm_cycleTime" name="cycleTime" class="smallinput" style=" text-align: center;display: inline-block;vertical-align: top;width: 150px;padding-left:0;margin-left:3px;height:31px" readonly/>
                            <input name="cycleStart" id="cycleStart" type="hidden">
                            <input name="cycleEnd" id="cycleEnd" type="hidden">
                            <div id="frm_cycleTime_box" style="display: inline-block;width:1px;position: relative;vertical-align: bottom;visibility: hidden;">
                                <div id="frm_cycleTime_boxs">
                                    <div id="frm_cycleTime_box1" class="cycleTime_box">
                                        <div class="cycleTime_box_start">
                                            {for $i=0;$i<24;$i++}
                                                <span class="cycleTime_item" data-val="{sprintf("%02d:00",$i)}">{sprintf("%02d:00",$i)}</span>
                                                <span class="cycleTime_item" data-val="{sprintf("%02d:30",$i)}">{sprintf("%02d:30",$i)}</span>
                                            {/for}
                                        </div>
                                        <div class="cycleTime_box_end">
                                            <span class="cycleTime_item" data-val="00:30">00:30</span>
                                            {for $i=1;$i<24;$i++}
                                                <span class="cycleTime_item" data-val="{sprintf("%02d:00",$i)}">{sprintf("%02d:00",$i)}</span>
                                                <span class="cycleTime_item" data-val="{sprintf("%02d:30",$i)}">{sprintf("%02d:30",$i)}</span>
                                            {/for}
                                            <span class="cycleTime_item" data-val="00:00">00:00</span>
                                        </div>
                                    </div>
                                    <div id="frm_cycleTime_box2" class="cycleTime_box">
                                        <div class="cycleTime_box_start">
                                            {var $weeks = array(1=>"一",2=>"二",3=>"三",4=>"四",5=>"五",6=>"六",7=>"日")}
                                            {for $i=1;$i<8;$i++}
                                                <span class="cycleTime_item" data-val="{$i}">{sprintf("星期%s",$weeks[$i])}</span>
                                            {/for}
                                        </div>
                                        <div class="cycleTime_box_end">
                                            {for $i=1;$i<8;$i++}
                                                <span class="cycleTime_item" data-val="{$i}">{sprintf("星期%s",$weeks[$i])}</span>
                                            {/for}
                                        </div>
                                    </div>
                                    <div id="frm_cycleTime_box3" class="cycleTime_box">
                                        <div class="cycleTime_box_start">
                                            {for $i=1;$i<32;$i++}
                                                <span class="cycleTime_item" data-val="{$i}">{sprintf("%d",$i)}</span>
                                            {/for}
                                        </div>
                                        <div class="cycleTime_box_end">
                                            {for $i=1;$i<32;$i++}
                                                <span class="cycleTime_item" data-val="{$i}">{sprintf("%d",$i)}</span>
                                            {/for}
                                        </div>
                                    </div>
                                    <div style="border-top:1px solid #ddd;text-align:right;padding:8px 15px;margin-top:5px">
                                        <span id="cycleTime_submit">确定</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>外部人可见</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <label class='radio'><input name='visibility' type="radio" value='1'>是</label>
                            <label class='radio'><input name='visibility' checked type="radio" value='0'>否</label>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>任务模型</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">

                            <label class="radiobox-input" data-value="1"><span><input type="radio" name="standardTypes" value="1">计时模型</span></label>
                            <label class="radiobox-input" data-value="2"><span><input type="radio" name="standardTypes" value="2">计件模型</span></label>

                            {*<select name="standardId" id="standardId">*}
                            {*{foreach $standards as $s}*}
                            {*<option data-workload="{$s["workload"]}" value="{$s["id"]}" {if $s["names"]=="任务执行"}selected{/if} data-val="{$s["acorn"]}">{$s["names"]}</option>*}
                            {*{/foreach}*}
                            {*</select>*}
                            <span class="help-question" target="_blank" href="">?</span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>预估任务量</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group" id="workload_type_1">
                            <select id="workload_day">
                                {for $i=0;$i<16;$i++}
                                    <option value="{$i}">{$i}天</option>
                                {/for}
                            </select>

                            <select style="height:35px;padding-left:10px;width:80px" id="workload_hour">
                                {for $i=0;$i<8;$i++}
                                    <option value="{$i}">{$i}小时</option>
                                {/for}
                            </select>
                            <select style="height:35px;padding-left:10px;width:80px;margin-left:5px" id="workload_minute">
                                {for $i=0;$i<60;$i=$i+15}
                                    <option value="{$i}">{$i}分钟</option>
                                {/for}
                            </select>
                            <input name="workload" id="workload" value="" type="hidden">
                        </div>
                        <div class="input-group" id="workload_type_2">
                            <input style="width:100px" name="workload" id="workload_2" value=""> 个单位
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>积分公式</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <div class="expressie" id="expressie_1"> = 日基础分 &times; 难度系数 &times; 完成质量 &times; 任务量</div>
                            <div class="expressie" id="expressie_2"> = 每件基础分 &times; 件数 &times; 完成质量</div>
                            <div class="show-standard-acorn"></div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>任务内容</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <textarea id="frm_content_pc" name="content" style="width: 600px; height: 250px"></textarea>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>图片/附件</label></td>
                <td>
                    <div class="field control-group">
                        <div class="img-uploader-file" data-name="thumbs" data-options="other"></div>
                    </div>
                </td>
            </tr>
            </thead>
        </table>
    </form>
{/block}